import React, { CSSProperties, JSX } from 'react'
import { TitleBar } from './title-bar'
import styles from './index.module.scss'

interface Props {
  children?: React.ReactNode
  parentStyle?: CSSProperties
  childStyle?: CSSProperties
}

export function NoFrame({ children, childStyle, parentStyle }: Props): JSX.Element {
  const onClose = (): void => {
    window.close()
  }

  return (
    <div style={parentStyle} className={styles['no-frame-wrap']}>
      <div className={styles['no-frame-child']} style={childStyle}>
        <TitleBar onClose={onClose} />
        <div style={{ flex: 1 }}>{children}</div>
      </div>
    </div>
  )
}
